/**
* Created by ren on 2016/12/27.
*/
<template>
  <div class='jSJConfirm jSJDetail'>
    <Nav></Nav>
    <div class="container con-wrap">
      <div
        style="font-size: 18px;color: #333333;margin-top: 20px;padding-left: 30px;border-bottom: 2px solid #e9e9e9;padding-bottom: 15px">
        确认付款
      </div>
      <div class="goods-wrap" v-if="style==='dt'">
        <div class="goods">
          <ul>
            <li style="margin-bottom: 15px!important;">产品名称：{{orderObject.productName}}</li>
            <li style="margin-bottom: 15px!important;" v-if="orderObject.putinType==='day'">定投类型：日</li>
            <li style="margin-bottom: 15px!important;" v-if="orderObject.putinType==='week'">定投类型：周</li>
            <li style="margin-bottom: 15px!important;" v-if="orderObject.putinType==='month'">定投类型：月</li>
            <li style="margin-bottom: 15px!important;">定投克数：{{(orderObject.weight/1000).toFixed(1)}}</li>
            <li style="margin-bottom: 15px!important;">起投日期：{{orderObject.startTime}}</li>
            <li style="margin-bottom: 15px!important;">到期日期：{{orderObject.endTime}}</li>
          </ul>
        </div>
        <div class="reach" style="margin-top: 45px;" v-if="style!=='dt'">
          <img :src="isUseGold?require('../../assets/true3.png'):require('../../assets/hollow.png')" alt=""
               style="margin-top: -5px;" width="18" height="18" @click="useGold"><span
          style="margin-left: 13px">共有{{ShopPriceData.sumGlodBean}}个，可用{{ShopPriceData.deductionGlodBean}}个</span>
          <span style="float: right;margin-right: 110px;color: #ff9900">-¥{{(ShopPriceData.deductionPrice/100).toFixed(2)}}</span>
        </div>
      </div>
      <div class="goods-wrap" v-if="style==='jsj'">
        <div class="goods">
          <ul>
            <li style="margin-bottom: 15px!important;">商品名称：{{orderObject.kinsonName}}</li>
            <li style="margin-bottom: 15px!important;">黄金克重：{{(orderObject.weight/1000).toFixed(1)}}g</li>
            <li class="price" style="margin-bottom: 15px!important;">
              交易金额：¥{{(ShopPriceData.goldPrice/100).toFixed(2)}}
            </li>
          </ul>
        </div>
        <div class="reach" style="margin-top: 45px;" v-if="style!=='jsj'">
          <img :src="isUseGold?require('../../assets/true3.png'):require('../../assets/hollow.png')" alt=""
               style="margin-top: -5px;" width="18" height="18" @click="useGold"><span
          style="margin-left: 13px">共有{{ShopPriceData.sumGlodBean}}个，可用{{ShopPriceData.deductionGlodBean}}个</span>
          <span style="float: right;margin-right: 110px;color: #ff9900">-¥{{(ShopPriceData.deductionPrice/100).toFixed(2)}}</span>
        </div>
      </div>
      <div class="goods-wrap" v-if="style==='sp'&&orderObject">
        <div class="goods">
          <ul>
            <li style="margin-bottom: 15px!important;">订单编号：{{orderObject.orderNo}}</li>
            <li style="margin-bottom: 15px!important;">订单时间：{{orderObject.createTime}}</li>
            <li style="color:#ee7601;margin-bottom: 15px!important;">账户号：{{$cookie.get('mobile')}}</li>
            <li v-if="orderObject.address">收货地址：{{orderObject.address}}</li>
            <li v-else="">收货地址：{{address.province}}{{address.city}}{{address.area}}{{address.detailAddress}}</li>
          </ul>
        </div>
      </div>
      <div class="goods-wrap" v-if="style==='moreGoods'">
        <div class="goods">
          <ul>
            <li style="margin-bottom: 15px!important;">订单编号：{{orderObject.orderNo}}</li>
            <li style="margin-bottom: 15px!important;">订单时间：{{orderObject.createTime}}</li>
            <li style="color:#ee7601;margin-bottom: 15px!important;">账户号：{{$cookie.get('mobile')}}</li>
          </ul>
        </div>
      </div>
      <template v-if="this.style !== 'dt'&&this.style !== 'jsj'">
        <div class="pay item" v-if="orderObject!==''">
          <span style="font-size: 24px;margin-left: 30px">需支付</span>
          <span style="float: right;margin-right: 110px;color: #e31818;font-size: 24px">¥{{(orderObject.orderPrice/100).toFixed(2)}}</span>
        </div>
      </template>
      <template v-else>
        <div class="pay item" v-if="orderObject!==''">
          <span style="font-size: 24px;margin-left: 30px">需支付</span>
          <span style="float: right;margin-right: 110px;color: #e31818;font-size: 24px" v-if="isUseGold">¥{{((goldPrice*orderObject.weight/1000-ShopPriceData.deductionPrice)/100.0).toFixed(2)}}</span>
          <template v-else>
            <span style="float: right;margin-right: 110px;color: #e31818;font-size: 24px">¥{{(goldPrice*orderObject.weight/100000).toFixed(2)}}</span>
          </template>
        </div>
      </template>

      <div class="pay-style item" style="font-size: 18px;padding-left: 30px">请选择支付方式</div>
      <div class="item" style="padding-left: 110px" v-if="style!=='dt'">
        <img :src="payStyle===0?require('../../assets/solid.png'):require('../../assets/hollow.png')"
             style="margin-right: 30px;cursor: pointer" @click="cutPayStyle(0)">
        <img src="../../assets/yinlian.png" alt="" style="margin-right: 20px">
        <span>银联在线支付</span>
      </div>
      <div class="item" style="padding-left: 110px;margin-bottom: 51px">
        <img :src="payStyle===1?require('../../assets/solid.png'):require('../../assets/hollow.png')"
             @click="cutPayStyle(1)" style="margin-right: 30px;cursor: pointer">
        <img src="../../assets/linqianbao.png" alt="" style="margin-right: 20px">
        <span>零钱包支付</span>
      </div>
      <button class="btn" @click="wapPay">{{this.butText}}</button>
    </div>
    <InputPwd v-if="inputPwdStatus" :_parentThis="this"></InputPwd>
    <div id="yinlian"></div>
  </div>
</template>

<script>
  import Nav from '../Nav'
  import Datepicker from 'vuejs-datepicker'

  import InputPwd from '../InputPwd'
  import API from '../../api'
  export default {
    name: 'jSJDetail',
    components: {
      Nav,
      Datepicker,
      InputPwd
    },
    data: function () {
      return {
        isUseGold: false,
        date: new Date(2016, 9, 16),
        inputPwdStatus: false,
        style: 'jsj',
        orderObject: '',
        payStyle: 0,
        yinlian: '',
        butText: '确定付款',
        password: '',
        ShopPriceData: '',
        dingtuoData: '',
        address: 'address',
        goldPrice: ''
      }
    },
    methods: {
      useGold: function () {
        if (this.ShopPriceData.deductionGlodBean !== 0) {
          this.isUseGold = !this.isUseGold
        }
      },
      cutPayStyle: function (num) {
        this.payStyle = num
      },
      wapPay: function () {
        this.butText = '正在支付……'
        switch (this.style) {
          case 'sp':
            if (this.payStyle === 0) {
              this.$http.post(API.wapPay, {
                orderNo: this.orderObject.orderNo,
                useRange: 2
              }).then((ret) => {
                var result = ret.body
                if (typeof result === 'object') {
                  var reader = new window.FileReader()
                  reader.addEventListener('loadend', function () {
                    result = reader.result
                    /**
                     * 银联支付
                     * @type {Element}
                     */
                    var cont = document.getElementById('yinlian')
                    cont.innerHTML = result
                    var oldScript = cont.getElementsByTagName('script')[0]
                    cont.removeChild(oldScript)
                    var newScript = document.createElement('script')
                    newScript.type = 'text/javascript'
                    newScript.innerHTML = oldScript.innerHTML
                    cont.appendChild(newScript)
                  })
                  reader.readAsText(result)
                } else {
                  /**
                   * 银联支付
                   * @type {Element}
                   */
                  var cont = document.getElementById('yinlian')
                  cont.innerHTML = result
                  var oldScript = cont.getElementsByTagName('script')[0]
                  cont.removeChild(oldScript)
                  var newScript = document.createElement('script')
                  newScript.type = 'text/javascript'
                  newScript.innerHTML = oldScript.innerHTML
                  cont.appendChild(newScript)
                }
              }, (err) => {
                console.log(err)
                this.butText = '确定支付'
              })
            } else {
              if (this.$cookie.get('existPay') === '1') {
                this.inputPwdStatus = true
                this.$cookie.set('initpwd', 'false')
              } else {
                this.notifyStatus = '0|请先设置支付密码，再进行结算！'
                this.$router.push({name: 'safeMain'})
                this.$cookie.set('initpwd', 'true')
              }
            }
            break
          case 'dt':
            this.$http.post(API.saveOrder, {
              putinId: this.orderObject.putinId,
              userId: this.$cookie.get('id'),
              startTime: this.orderObject.startTime,
              putinType: this.orderObject.putinType,
              cycle: this.orderObject.cycle,
              weight: this.orderObject.weight
            }).then((ret) => {
              const result = ret.body
              if (result.code === 1) {
                this.dingtuoData = result.object
                if (this.payStyle === 0) {
                } else {
                  if (this.$cookie.get('existPay') === '1') {
                    this.inputPwdStatus = true
                    this.$cookie.set('initpwd', 'false')
                  } else {
                    this.notifyStatus = '0|请先设置支付密码，再进行结算！'
                    this.$router.push({name: 'safeMain'})
                    this.$cookie.set('initpwd', 'true')
                  }
                }
              }
            }, (err) => {
              console.log(err)
              this.butText = '确定支付'
            })
            break
          case 'jsj':
            if (this.payStyle === 0) {
              this.$http.post(API.kinsonSaveOrder, {
                userId: this.$cookie.get('id'),
                orderNumber: 1,
                weight: this.orderObject.weight,
                kinsonGoldId: this.orderObject.kinsonGoldId,
                payType: 1,
                useRange: 2,
                isUseGoldBean: this.isUseGold ? 1 : 0,
                qishu: 1
              }).then((ret) => {
                var result = ret.body
                if (typeof result === 'object') {
                  var reader = new window.FileReader()
                  reader.addEventListener('loadend', function () {
                    result = reader.result
                    /**
                     * 银联支付
                     * @type {Element}
                     */
                    var cont = document.getElementById('yinlian')
                    cont.innerHTML = result
                    var oldScript = cont.getElementsByTagName('script')[0]
                    cont.removeChild(oldScript)
                    var newScript = document.createElement('script')
                    newScript.type = 'text/javascript'
                    newScript.innerHTML = oldScript.innerHTML
                    cont.appendChild(newScript)
                  })
                  reader.readAsText(result)
                } else {
                  /**
                   * 银联支付
                   * @type {Element}
                   */
                  var cont = document.getElementById('yinlian')
                  cont.innerHTML = result
                  var oldScript = cont.getElementsByTagName('script')[0]
                  cont.removeChild(oldScript)
                  var newScript = document.createElement('script')
                  newScript.type = 'text/javascript'
                  newScript.innerHTML = oldScript.innerHTML
                  cont.appendChild(newScript)
                }
              }, (err) => {
                console.log(err)
                this.butText = '确定支付'
              })
            } else {
              if (this.$cookie.get('existPay') === '1') {
                this.inputPwdStatus = true
                this.$cookie.set('initpwd', 'false')
              } else {
                this.notifyStatus = '0|请先设置支付密码，再进行结算！'
                this.$router.push({name: 'safeMain'})
                this.$cookie.set('initpwd', 'true')
              }
            }
            break
          case 'moreGoods':
            if (this.payStyle === 0) {
              this.$http.post(API.wapPay, {
                orderNo: this.orderObject.orderNo,
                useRange: 2
              }).then((ret) => {
                var result = ret.body
                if (typeof result === 'object') {
                  var reader = new window.FileReader()
                  reader.addEventListener('loadend', function () {
                    result = reader.result
                    /**
                     * 银联支付
                     * @type {Element}
                     */
                    var cont = document.getElementById('yinlian')
                    cont.innerHTML = result
                    var oldScript = cont.getElementsByTagName('script')[0]
                    cont.removeChild(oldScript)
                    var newScript = document.createElement('script')
                    newScript.type = 'text/javascript'
                    newScript.innerHTML = oldScript.innerHTML
                    cont.appendChild(newScript)
                  })
                  reader.readAsText(result)
                } else {
                  /**
                   * 银联支付
                   * @type {Element}
                   */
                  var cont = document.getElementById('yinlian')
                  cont.innerHTML = result
                  var oldScript = cont.getElementsByTagName('script')[0]
                  cont.removeChild(oldScript)
                  var newScript = document.createElement('script')
                  newScript.type = 'text/javascript'
                  newScript.innerHTML = oldScript.innerHTML
                  cont.appendChild(newScript)
                }
              }, (err) => {
                console.log(err)
                this.butText = '确定支付'
              })
            } else {
              if (this.$cookie.get('existPay') === '1') {
                this.inputPwdStatus = true
                this.$cookie.set('initpwd', 'false')
              } else {
                this.notifyStatus = '0|请先设置支付密码，再进行结算！'
                this.$router.push({name: 'safeMain'})
                this.$cookie.set('initpwd', 'true')
              }
            }
            break
        }
      },
      getShopPrice: function () {
        this.$http.post(API.getShopPrice, {
          userId: this.$cookie.get('id'),
          weight: this.orderObject.weight,
          qishu: 1
        }).then((ret) => {
          const result = ret.body
          if (result.code === 1) {
            this.ShopPriceData = result.object
          } else {
            this.notifyStatus = '0|' + result.message
          }
        }, (err) => {
          console.log(err)
        })
      },
      findGoldPrice: function () {
        this.$http.post(API.findGoldPrice, {
          userId: this.$cookie.get('id')
        }).then((ret) => {
          const result = ret.body
          if (result.code === 1) {
            this.goldPrice = result.object
          } else {
            this.notifyStatus = '0|' + result.message
          }
        }, (err) => {
          console.log(err)
        })
      },
      findAddressByOrderNo: function () {
        this.$http.post(API.findAddressByOrderNo, {
          orderNo: this.orderObject.orderNo
        }).then((ret) => {
          const result = ret.body
          if (result.code === 1) {
            this.address = result.object
          } else {
            this.notifyStatus = '0|' + result.message
          }
        }, (err) => {
          console.log(err)
        })
      }
    },
    mounted: function () {
      this.$cookie.set('initpwd', 'false')
      if (!this.$cookie.get('id')) {
        this.$router.push({'name': 'login'})
        return
      }
      this.style = this.$route.params.style
      this.$cookie.set('handleObj', this.style)
      if (this.style === 'jsj') {
        this.orderObject = JSON.parse(this.$cookie.get('orderObject'))
        this.findGoldPrice()
        if (!this.orderObject) {
          this.$router.go(-1)
        }
        this.getShopPrice()
      } else if (this.style === 'dt') {
        this.payStyle = 1
        this.orderObject = JSON.parse(this.$cookie.get('order_dingtouObj'))
        this.findGoldPrice()
      } else {
        this.orderObject = JSON.parse(this.$cookie.get('orderObject'))
        this.getShopPrice()
        this.findAddressByOrderNo()
        if (!this.orderObject) {
          this.$router.go(-1)
        }
      }
    }
  }
</script>

<style lang="scss">
  @import "../../scss/jSJDetail.scss";
</style>

